<div class="statistics-page">
    <!-- 页面标题 -->
    <div class="page-header">
        <h2><i class="fas fa-chart-bar"></i> 公文数据分析</h2>
        <p>全面了解公文知识库使用情况和数据统计</p>
    </div>

    <!-- 数据筛选区域 -->
    <div class="filter-section">
        <div class="filter-group">
            <label for="time-range">时间范围：</label>
            <select id="time-range" class="form-select">
                <option value="7days">最近7天</option>
                <option value="30days" selected>最近30天</option>
                <option value="90days">最近90天</option>
                <option value="custom">自定义</option>
            </select>
        </div>

        <div class="filter-group" id="custom-date-range" style="display:none;">
            <label for="start-date">从：</label>
            <input type="date" id="start-date" class="form-date">
            <label for="end-date">至：</label>
            <input type="date" id="end-date" class="form-date">
        </div>

        <div class="filter-group">
            <label for="doc-type">公文类型：</label>
            <select id="doc-type" class="form-select">
                <option value="all">全部类型</option>
                <option value="notice">通知</option>
                <option value="report">报告</option>
                <option value="request">请示</option>
                <option value="reply">批复</option>
                <option value="decision">决定</option>
            </select>
        </div>

        <button class="btn-filter"><i class="fas fa-filter"></i> 筛选</button>
        <button class="btn-export"><i class="fas fa-download"></i> 导出数据</button>
    </div>

    <!-- 主要统计图表 -->
    <div class="chart-container">
        <div class="chart-card">
            <div class="chart-header">
                <h3>公文新增趋势</h3>
                <div class="chart-actions">
                    <button class="btn-chart-action active" data-type="line">折线图</button>
                    <button class="btn-chart-action" data-type="bar">柱状图</button>
                </div>
            </div>
            <div class="chart-wrapper">
                <canvas id="trendChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h3>公文类型分布</h3>
            </div>
            <div class="chart-wrapper">
                <canvas id="typeChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h3>发文单位TOP10</h3>
            </div>
            <div class="chart-wrapper">
                <canvas id="departmentChart"></canvas>
            </div>
        </div>

        <div class="chart-card">
            <div class="chart-header">
                <h3>公文关键词词云</h3>
            </div>
            <div class="chart-wrapper">
                <div id="wordCloud"></div>
            </div>
        </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="data-table-section">
        <div class="section-header">
            <h3><i class="fas fa-table"></i> 详细数据</h3>
            <div class="table-actions">
                <button class="btn-refresh"><i class="fas fa-sync-alt"></i> 刷新</button>
                <button class="btn-export"><i class="fas fa-file-excel"></i> 导出Excel</button>
            </div>
        </div>

        <table class="data-table">
            <thead>
            <tr>
                <th>日期</th>
                <th>公文类型</th>
                <th>发文单位</th>
                <th>新增数量</th>
                <th>访问量</th>
                <th>下载量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>2023-06-15</td>
                <td>通知</td>
                <td>区人民政府办公室</td>
                <td>15</td>
                <td>128</td>
                <td>42</td>
                <td><button class="btn-detail">详情</button></td>
            </tr>
            <tr>
                <td>2023-06-14</td>
                <td>报告</td>
                <td>区发展改革委</td>
                <td>8</td>
                <td>76</td>
                <td>23</td>
                <td><button class="btn-detail">详情</button></td>
            </tr>
            <tr>
                <td>2023-06-13</td>
                <td>请示</td>
                <td>区教育局</td>
                <td>5</td>
                <td>65</td>
                <td>18</td>
                <td><button class="btn-detail">详情</button></td>
            </tr>
            <tr>
                <td>2023-06-12</td>
                <td>批复</td>
                <td>区政府办公室</td>
                <td>12</td>
                <td>94</td>
                <td>31</td>
                <td><button class="btn-detail">详情</button></td>
            </tr>
            <tr>
                <td>2023-06-11</td>
                <td>决定</td>
                <td>区人力资源和社会保障局</td>
                <td>3</td>
                <td>58</td>
                <td>15</td>
                <td><button class="btn-detail">详情</button></td>
            </tr>
            </tbody>
        </table>

        <div class="pagination">
            <button class="btn-prev"><i class="fas fa-chevron-left"></i> 上一页</button>
            <div class="page-numbers">
                <span class="page-number active">1</span>
                <span class="page-number">2</span>
                <span class="page-number">3</span>
                <span class="page-number">...</span>
                <span class="page-number">10</span>
            </div>
            <button class="btn-next">下一页 <i class="fas fa-chevron-right"></i></button>
        </div>
    </div>
</div>

<style>
    /* 统计页面特有样式 */
    .statistics-page {
        padding: 20px;
    }

    .page-header {
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    .page-header h2 {
        color: #1a5fb4;
        font-size: 24px;
        display: flex;
        align-items: center;
    }

    .page-header h2 i {
        margin-right: 10px;
    }

    .page-header p {
        color: #666;
        margin-top: 5px;
    }

    /* 筛选区域样式 */
    .filter-section {
        background: white;
        border-radius: 8px;
        padding: 15px 20px;
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .filter-group {
        display: flex;
        align-items: center;
    }

    .filter-group label {
        margin-right: 8px;
        color: #555;
        font-size: 14px;
    }

    .form-select {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: white;
        min-width: 120px;
    }

    .form-date {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-right: 10px;
    }

    .btn-filter, .btn-export {
        padding: 8px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 14px;
        transition: all 0.3s;
    }

    .btn-filter {
        background-color: #1a5fb4;
        color: white;
    }

    .btn-filter:hover {
        background-color: #0d47a1;
    }

    .btn-export {
        background-color: #26a269;
        color: white;
    }

    .btn-export:hover {
        background-color: #1e8449;
    }

    .btn-filter i, .btn-export i {
        margin-right: 5px;
    }

    /* 图表容器样式 */
    .chart-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .chart-card {
        background: white;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .chart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .chart-header h3 {
        color: #333;
        font-size: 16px;
    }

    .chart-actions {
        display: flex;
    }

    .btn-chart-action {
        padding: 5px 10px;
        border: 1px solid #ddd;
        background: white;
        cursor: pointer;
        font-size: 12px;
    }

    .btn-chart-action:first-child {
        border-radius: 4px 0 0 4px;
    }

    .btn-chart-action:last-child {
        border-radius: 0 4px 4px 0;
    }

    .btn-chart-action.active {
        background-color: #1a5fb4;
        color: white;
        border-color: #1a5fb4;
    }

    .chart-wrapper {
        height: 300px;
        position: relative;
    }

    #wordCloud {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 数据表格区域 */
    .data-table-section {
        background: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .section-header h3 {
        color: #333;
        font-size: 18px;
        display: flex;
        align-items: center;
    }

    .section-header h3 i {
        margin-right: 10px;
        color: #1a5fb4;
    }

    .table-actions {
        display: flex;
        gap: 10px;
    }

    .btn-refresh, .btn-export-excel {
        padding: 6px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-size: 14px;
        transition: all 0.3s;
    }

    .btn-refresh {
        background-color: #f5f7fa;
        color: #555;
    }

    .btn-refresh:hover {
        background-color: #e0e5eb;
    }

    .btn-export-excel {
        background-color: #26a269;
        color: white;
    }

    .btn-export-excel:hover {
        background-color: #1e8449;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .data-table th, .data-table td {
        padding: 12px 15px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }

    .data-table th {
        background-color: #f5f7fa;
        color: #555;
        font-weight: 500;
    }

    .data-table tr:hover {
        background-color: #f5f7fa;
    }

    .btn-detail {
        background-color: #1a5fb4;
        color: white;
        border: none;
        padding: 5px 10px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        transition: background-color 0.3s;
    }

    .btn-detail:hover {
        background-color: #0d47a1;
    }

    /* 分页样式 */
    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
    }

    .btn-prev, .btn-next {
        padding: 8px 15px;
        border: 1px solid #ddd;
        background: white;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }

    .btn-prev:hover, .btn-next:hover {
        background-color: #f5f7fa;
    }

    .btn-prev i {
        margin-right: 5px;
    }

    .btn-next i {
        margin-left: 5px;
    }

    .page-numbers {
        display: flex;
        gap: 5px;
    }

    .page-number {
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
    }

    .page-number:hover {
        background-color: #f5f7fa;
    }

    .page-number.active {
        background-color: #1a5fb4;
        color: white;
        border-color: #1a5fb4;
    }

    @media (max-width: 768px) {
        .chart-container {
            grid-template-columns: 1fr;
        }

        .filter-section {
            flex-direction: column;
            align-items: flex-start;
        }

        .data-table {
            display: block;
            overflow-x: auto;
        }
    }
</style>

<script>

</script>